<template>
  <div class="knowledge-home tech-container">
    <div class="container tech-content-area">
      <div class="header">
        <div>
          <h2 class="neon-title">📖 我的知识库 <span class="sub-text">// KNOWLEDGE CORE</span></h2>
          <p class="sub-text">管理、组织和利用您的智能知识库</p>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-plus" class="tech-button primary-btn"
            @click="showCreate = true">创建知识库 (NEW)</el-button>
        </div>

      </div>

      <knowledge-list ref="knowledgeList" @card-click="handleCardClick" @file-list-loadding="handleFileListLoadding"
        @loadding="handleLoadding" />

      <div class="card-detail" v-if="selectedCard">
        <file-list :files="fileList" :title="selectedCard" :knowledgeCode="knowledgeCode" @fileDelete="handleFileDelete"
          @dataLoadding="handleFileUpload" />
      </div>
    </div>

    <knowledge-create-modal :visible.sync="showCreate" @submit="handleCreate" />
  </div>
</template>

<script>
// JavaScript 逻辑保持不变
import NavBar from './knowledge/components/NavBar.vue'
import KnowledgeList from './knowledge/components/KnowledgeList.vue'
import FileList from './knowledge/components/FileList.vue'
import { getFileListByType, createKnowledge, deleteKnowledgeFile } from '@/api/knowledge'
import KnowledgeCreateModal from './knowledge/components/KnowledgeCreateModal.vue'

export default {
  components: { NavBar, KnowledgeList, FileList, KnowledgeCreateModal },
  data() {
    return {
      selectedCard: '业务文档库',
      knowledgeCode: '',
      fileList: [],
      showCreate: false,//知识库创建弹框
      getDataList: '-1'
    }
  },
  methods: {
    /**
     * * @param data 知识库上传文件
     */
    handleFileUpload(data) {
      console.log('上传文件数据：', data)

      this.getList(this.knowledgeCode)
    },
    /*
     * 删除文件操作
     * @param row 文件行数据
     */
    handleFileDelete(data) {

      const param = {
        fileId: data.id
      }

      deleteKnowledgeFile(param).then(res => {
        if (res.data.code === 200) {
          this.$message.success('文件删除成功')
          this.getList(this.knowledgeCode) // 刷新文件列表
        } else {
          this.$message.error(res.data.message || '文件删除失败，请稍后重试')
        }
      }).catch(err => {
        console.error('删除文件失败:', err)
        this.$message.error('删除文件失败，请稍后重试')
      })
    },
    /**
     * 知识库创建操作
     * @param data 
     */
    async handleCreate(data) {
      console.log('创建知识库数据：', data)

      if (!data || data.name === null || data.name === '' || data.name === undefined) {
        this.$message.error('知识库名称不能为空')
        return
      }

      if (!data || data.name === null || data.name === '' || data.name === undefined) {
        this.$message.error('知识库描述不能为空')
        return
      }

      const param = {
        ...data,
      }
      const res = await createKnowledge(param);

      if (res.data.code === 200) {
        this.$message.success('知识库创建成功')
        this.showCreate = false // 关闭弹窗

        this.$refs.knowledgeList.getList() // 刷新知识库列表

        this.$refs.knowledgeList.handleClose()
      } else {
        this.$message.error(res.data.message || '知识库创建失败，请稍后重试')
      }
      // TODO: 发送请求保存 data
    },
    /**
     * * @param val 子组件上传操作后，获取初始知识库编码
     */
    handleFileListLoadding(val) {

      this.getList(val)

    },
    /**
     * * @param card 文件卡片点击触发
     */
    handleCardClick(card) {
      this.selectedCard = card.name
      this.knowledgeCode = card.knowledgeCode

      this.getList(card.knowledgeCode)
    },
    /**
     * * @param code 查询文件列表数据
     */
    async getList(code) {

      const param = {
        knowledgeCode: code
      }

      const res = await getFileListByType(param);

      if (res.data.code === 200) {
        this.fileList = res.data.data
      }
    },
    /**
     * 知识库列表刷新触发操作
     */
    handleLoadding() {
      console.log('知识库列表刷新触发操作')
      this.$refs.knowledgeList.getList() // 刷新知识库列表
    }
  }
}
</script>

<style scoped lang="less">
/* ================= 赛博朋克主题变量 ================= */
@bg-dark: #0f1219;
@primary-color: #00f2ff; /* Cyber Cyan */
@accent-color: #7d2ae8;  /* Neon Purple */
@text-main: #e2e8f0;
@text-sub: #94a3b8;
@border-color: rgba(255, 255, 255, 0.08);

/* ================= 容器和字体 ================= */
.knowledge-home {
  min-height: 100vh;
  background-color: @bg-dark;
  color: @text-main;
  font-family: 'Inter', 'Courier New', monospace;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 24px;
}

/* ================= 头部样式 ================= */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid @border-color;
  margin-bottom: 24px;
}

.neon-title {
  color: @primary-color;
  text-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 0;
  
  .sub-text {
    font-size: 16px;
    color: @text-sub;
    margin-left: 10px;
    font-weight: normal;
  }
}

.sub-text {
  color: @text-sub;
  font-size: 14px;
  margin-top: 5px;
}

/* ================= 主按钮 (创建知识库) 样式重写 ================= */
.tech-button {
  border-radius: 4px;
  transition: all 0.3s;
  padding: 12px 20px;
  
  &.primary-btn {
    // 主按钮：霓虹渐变
    background: linear-gradient(90deg, @primary-color, @accent-color) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 242, 255, 0.6);
    }
  }
}

/* ================= 详情区域 ================= */
.card-detail {
  margin-top: 32px;
}
</style>